<!--  -->
<template>
  <div>英雄列表
  
  <div class="col-md-10">
    <router-link to="/hero/add" class="btn btn-primary">添加英雄</router-link>
    <hr>
    <table class="table table-hover">
      <thead>
      <tr>
        <th>ID</th>
        <th>英雄名称</th>
        <th>英雄性别</th>
        <th>创建时间</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="item in heroList" :key="item.id">
        <td>{{item.id}}</td>
        <td>{{item.heroName}}</td>
        <td>{{item.gender}}</td>
        <td>{{item.time|dispose}}</td>
        <td>
          <button class="btn btn-success" @click="toEdit(item.id)">编辑</button>
          &nbsp;
          &nbsp;&nbsp;
          &nbsp;&nbsp;
          <button class="btn btn-danger" @click="delHero(item.id)">删除</button>
        </td>
      </tr>
      <tr v-if="heroList.length == 0">
      <td colspan="5" style="text-align:center"></td>
      </tr>
      </tbody>
    </table>
  </div>
  </div>
</template>

<script>
// import axios from 'axios'
export default {
  data(){
    return {
      heroList:[]
    }
  },
  created() {
    this.getHero();
  },
  methods: {
   getHero(){
      this.$axios({
        method:'get',
        url:'heroes'
    }).then(res=>{
      // console.log(res.data);
      this.heroList = res.data
    })
   },
   delHero(id){
    //  console.log(id);
        if(confirm('你确定要删除吗？')){
             this.$axios({
                method:'delete',
                url:'heroes/'+id
              }).then(()=>{
                this.getHero()
              })     
        }
   },
   toEdit(id){
  
     this.$router.push(`/hero/edit/${id}`)
   }
  }

}
</script>